<template>
  <div class="ICP">
    <div class="container">
      <div class="detail">
        <div class="links">
          <!-- <span class="title">友情链接</span> -->
          <ul>
            <li class="li-disabled">企业服务</li>
            <li @click="JumpRoute('About')">关于我们</li>
            <li @click="JumpRoute('Contact')">联系我们</li>
            <!-- <li>讲师招募</li> -->
            <li @click="JumpRoute('Help')">帮助中心</li>
            <li class="li-disabled">意见反馈</li>
            <!-- <li>慕课大学</li> -->
            <!-- <li>代码托管</li> -->
            <!-- <li>友情链接</li> -->
          </ul>
        </div>
        <div class="desc">
          ©2020 codelover.club 版权所有
          <a href="https://beian.miit.gov.cn/"
            >粤ICP备20072498号-1</a
          >
        </div>
      </div>
      <div class="imgListBox">
        <div class="imgBox">
          <!-- <img src="@/assets/images/headLogo.png" /> -->
          <!-- <div class="title">智能制造学院</div> -->
        </div>
        <!-- <div class="imgBox">
          <img src="@/assets/images/headLogo.png" />
          <div class="title">智能制造学院</div>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    JumpRoute(name) {
      this.$router.push({name: name})
    },
  },
};
</script>

<style lang="stylus">
.ICP {
  padding: 0 0 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 170px;
  background: #f6f6f6;
  text-align: center;

  .container {
    max-width: 1200px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .detail {
      flex: 1;

      .links {
        .title {
          color: #919190;
        }

        ul {
          padding: 0;
          margin: 0;
          // margin-top: 7px;
          display: flex;
          align-items: center;
          // justify-content: space-between;
          justify-content: flex-start;
          line-height: 1;
          list-style: none;

          li {
            margin-right: 50px;
            padding: 3px 0;
            cursor: pointer;
            font-family: Segoe UI;
            font-size: 16px;
            color: #707070;
          }

          .li-disabled {
            cursor: context-menu;
          }
        }
      }

      .desc {
        margin-top: 23px;
        text-align: left;
        font-family: Segoe UI;
        font-size: 12px;
        color: #707070;

        a {
          font-family: Segoe UI;
          font-size: 12px;
          color: #707070;
        }

        a:hover {
          text-decoration: underline;
          color: #1890ff;
        }
      }
    }

    .imgListBox {
      display: flex;

      .imgBox {
        margin-right: 24px;

        img {
          // width: 40px;
          height: 40px;
          object-fit: cover;
          max-width: 80px;
        }

        .title {
          max-width: 75px;
          font-family: Segoe UI;
          font-size: 12px;
          color: #707070;
        }
      }
    }
  }
}
</style>